<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 画坊小程序 - 原型展示</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f2f5;
            padding: 20px;
        }
        
        .device-container {
            width: 390px; /* iPhone 15 Pro width */
            height: 844px; /* iPhone 15 Pro height */
            border-radius: 45px;
            overflow: hidden;
            border: 10px solid #1a1a1a;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            position: relative;
            background-color: white;
        }
        
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .device-label {
            font-weight: bold;
            margin-bottom: 10px;
            color: #0052d9; /* TDesign primary blue */
        }
    </style>
</head>
<body>
    <div class="container mx-auto">
        <h1 class="text-3xl font-bold mb-8 text-center text-blue-600">AI 画坊小程序 - 原型展示</h1>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            <!-- Home Page -->
            <div class="flex flex-col items-center">
                <div class="device-label">首页</div>
                <div class="device-container">
                    <iframe src="home.html"></iframe>
                </div>
            </div>
            
            <!-- Profile Page (Not Logged In) -->
            <div class="flex flex-col items-center">
                <div class="device-label">我的 (未登录)</div>
                <div class="device-container">
                    <iframe src="profile-not-logged.html"></iframe>
                </div>
            </div>
            
            <!-- Profile Page (Logged In) -->
            <div class="flex flex-col items-center">
                <div class="device-label">我的 (已登录)</div>
                <div class="device-container">
                    <iframe src="profile-logged.html"></iframe>
                </div>
            </div>
            
            <!-- Create Image Page -->
            <div class="flex flex-col items-center">
                <div class="device-label">创建图片</div>
                <div class="device-container">
                    <iframe src="create-image.html"></iframe>
                </div>
            </div>
            
            <!-- Generated Image Display Page -->
            <div class="flex flex-col items-center">
                <div class="device-label">图片生成结果</div>
                <div class="device-container">
                    <iframe src="image-result.html"></iframe>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
